<template>
	<div>
		<h1 class="gray">
		  <i class="el-icon-s-custom"> 个 人 中 心</i>
		</h1>
		<el-divider></el-divider>
		<el-form id="el-form" :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px">
		  <el-form-item label="旧密码" prop="currentPass">
		    <el-input type="password" placeholder="请输入旧密码" v-model="passForm.currentPass" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="新密码" prop="password">
		    <el-input type="password" placeholder="请输入新密码" v-model="passForm.password" show-password autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item label="确认密码" prop="checkPass">
		    <el-input type="password" placeholder="请确认密码" v-model="passForm.checkPass" show-password autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('passForm')">修 改</el-button>
		    <el-button @click="resetForm('passForm')">重 置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		name: "Repassword",
	data() {
	
	  var validatePass = (rule, value, callback) => {
		if (value === '') {
		  callback(new Error('请再次输入密码'));
		} else if (value !== this.passForm.password) {
		  callback(new Error('两次输入密码不一致!'));
		} else {
		  callback();
		}
	  };
		
	  return {
		  
		passForm: {
			  //旧密码
			currentPass: '',
			//新密码
		  password: '',
			//确认密码
			checkPass: ''
		},
	
		rules: {
		  password: [
			{required: true, message: '请输入新密码', trigger: 'blur'},
			{min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
		  ],
		  checkPass: [
			{required: true, validator: validatePass, trigger: 'blur'}
		  ],
		  currentPass: [
			{required: true, message: '请输入当前密码', trigger: 'blur'},
		  ]
		},
	
	  }
	},
	methods:{
		submitForm(formName) {
		  this.$refs[formName].validate((valid) => {
		    if (valid) {
				
		      this.$axios.post('/user/updatePass', this.passForm).then(res => {
				  
				  this.$message({
				    message: '修改成功',
				    type: 'success'
				  });
				  this.$refs[formName].resetFields();
		         
		      })
		
		    } else {
		      console.log('error submit!!');
		      return false;
		    }
		  });
		},
		resetForm(formName) {
		  this.$refs[formName].resetFields();
		}
		
	}
		
	}
</script>

<style>
	#el-form {
	  width: 430px;
	  margin: 50px auto;
	}
</style>
